import React from "react";
import { useTranslation } from "react-i18next";
import "./index.scss";
import { Table } from "antd";
import { RightOutlined, CheckOutlined } from "@ant-design/icons";
import { text_check } from "../../utils";

export default function RolePower(props) {
  const { t } = useTranslation();
  const { role_action_list, role_user_list, tableHeight } = props;
  // 国内国外判断
  const session_company = sessionStorage.getItem("company");

  const columns = [
    {
      title: t("system_manager.login_account"),
      dataIndex: "username",
      align: "center",
    },
    {
      title: t("system_manager.name"),
      align: "center",
      render: (_, record) => (
        <>
          <div>{record.name}</div>
          <div>{record.last_name}</div>
        </>
      ),
    },
    {
      title: (ReactNode) => {
        return session_company === "mg" ? "Email" : "手机号";
      },
      align: "center",
      render: (_, record) => (
        <>
          {session_company === "mg"
            ? record.email
              ? `***${record.email.substring(7)} `
              : ""
            : record.tel
            ? `***${record.tel.substring(7)}`
            : ""}
        </>
      ),
    },
    {
      title: t("system_manager.last_login_time"),
      dataIndex: "utime",
      align: "center",
    },
  ];
  return (
    <div className="role_user_power" style={{ width: "49.8vw" }}>
      <div style={{ height: tableHeight - 700 }} className="noPage-table">
        <Table
          dataSource={role_user_list}
          size="small"
          bordered
          columns={columns}
          rowKey="username"
          virtual
          scroll={{
            y: tableHeight - 700 - 39,
          }}
          rowHoverable={false}
          pagination={false}
        />
      </div>

      <div className="role_power_box">
        {role_action_list.map((item) => {
          return (
            <div className="role_power_row" key={item.msg_en}>
              <div className="role_power_row_title">{text_check(item)}</div>
              <RightOutlined />
              <div className="role_power_line">
                {item.children.map((child) => {
                  return (
                    <div className="role_power_row_conteten" key={child.msg_en}>
                      {text_check(child)}
                      <CheckOutlined />
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
